﻿@page "/components/togglebutton"
@page "/components/toggle-button"

<PageOutlet Url="components/togglebutton"
            Title="ToggleButton"
            Description="ToggleButton component of the bit BlazorUI components" />

<DemoPage Name="ToggleButton"
          Description="ToggleButton is a type of button that stores and shows a status representing the toggle state of the component."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Buttons/ToggleButton/BitToggleButton.razor"
          GitHubDemoUrl="Buttons/ToggleButton/BitToggleButtonDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>See the basic usage of a BitToggleButton in action.</div><br />
        <BitToggleButton>Microphone</BitToggleButton>
    </DemoExample>

    <DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
        <div>The BitToggleButton offers three variants: Fill (default), Outline, and Text.</div><br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill">Fill</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline">Outline</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text">Text</BitToggleButton>
        </div>
        <br /><br />
        <div>Disabled:</div><br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" IsEnabled="false">Fill</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" IsEnabled="false">Outline</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" IsEnabled="false">Text</BitToggleButton>
        </div>
    </DemoExample>

    <DemoExample Title="Texts" RazorCode="@example3RazorCode" Id="example3">
        <div>You can provide the text of the BitToggleButton in different ways.</div><br />
        <div>Text:</div><br/>
        <BitToggleButton Text="Microphone" />
        <br/><br/><br/><br/>
        <div>On/Off Texts:</div><br/>
        <BitToggleButton OnText="Muted" OffText="Unmuted" />
    </DemoExample>
    
    <DemoExample Title="Icons" RazorCode="@example4RazorCode" Id="example4">
        <div>Checkout different ways of utilizing Icons in BitToggleButton.</div><br />
        <div>IconName:</div><br/>
        <BitToggleButton Text="Microphone" IconName="@BitIconName.Microphone" />
        <br/><br/><br/><br/>
        <div>On/Off IconNames:</div><br/>
        <BitToggleButton OnText="Muted" OnIconName="@BitIconName.MicOff"
                         OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
        <br/><br/><br/><br/>
        <div>No text:</div><br/>
        <div class="example-box">
            <BitToggleButton IconName="@BitIconName.Microphone" />
            <BitToggleButton OnIconName="@BitIconName.MicOff" OffIconName="@BitIconName.Microphone" />
        </div>
        <br/><br/><br/>
        <div>IconOnly:</div><br/>
        <div class="example-box">
            <BitToggleButton IconOnly IconName="@BitIconName.Microphone" Text="Microphone" />
            <BitToggleButton IconOnly
                             OnText="Muted" OnIconName="@BitIconName.MicOff" 
                             OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
        </div>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Explore default checked state, two-way binding, and handling change events for a customizable user experience.</div><br />
        <div>DefaultIsChecked:</div><br />
        <BitToggleButton DefaultIsChecked="true"
                         OnText="Muted" OnIconName="@BitIconName.MicOff"
                         OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
        <br /><br /><br /><br />
        <div>Two-way bound:</div><br />
        <BitToggleButton @bind-IsChecked="twoWayBoundValue"
                         Text="@(twoWayBoundValue ? "Muted" : "Unmuted")"
                         IconName="@(twoWayBoundValue ? BitIconName.MicOff : BitIconName.Microphone)" />
        <br /><br />
        <BitCheckbox Label="Checked Toggle Button" @bind-Value="twoWayBoundValue" />
        <br /><br /><br /><br />
        <div>OnChange:</div><br />
        <BitToggleButton OnChange="v => onChangeValue = v"
                         OnText="Muted" OnIconName="@BitIconName.MicOff"
                         OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
        <br /><br />
        <div>Check status: @onChangeValue</div>
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example6RazorCode" Id="example6">
        <div>Here are some examples of customizing the BitToggleButton content.</div><br />
        <BitToggleButton>
            <div class="custom-template">
                <BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />
                <span>Custom template</span>
                <BitRollerLoading CustomSize="20" Color="BitColor.Tertiary" />
            </div>
        </BitToggleButton>
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div>Managing BitToggleButton click event (OnClick).</div><br />
        <BitToggleButton OnClick="() => clickCounter++">
            Click me (@clickCounter)
        </BitToggleButton>
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example8RazorCode" Id="example8">
        <div>Varying sizes for BitToggleButton tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
        <br /><br />
        <div><b>Small</b>:</div><br/>
        <div class="example-box">
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" Text="Microphone" />
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" Text="Microphone" />
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" Text="Microphone" />
            <BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br /><br /><br /><br />
        <div><b>Medium</b>:</div><br/>
        <div class="example-box">
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" Text="Microphone" />
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" Text="Microphone" />
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" Text="Microphone" />
            <BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br /><br /><br /><br />
        <div><b>Large</b>:</div><br /><br/>
        <div class="example-box">
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" Text="Microphone" />
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" Text="Microphone" />
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" Text="Microphone" />
            <BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />
        </div>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example9RazorCode" Id="example9">
        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div><br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Primary">Primary</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Primary">Primary</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Primary">Primary</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Secondary">Secondary</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Secondary">Secondary</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Secondary">Secondary</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Tertiary">Tertiary</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Tertiary">Tertiary</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Tertiary">Tertiary</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Info">Info</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Info">Info</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Info">Info</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Success">Success</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Success">Success</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Success">Success</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Warning">Warning</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Warning">Warning</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Warning">Warning</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Error">Error</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Error">Error</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.Error">Error</BitToggleButton>
        </div>
        <br />
        <div style="background:var(--bit-clr-fg-sec);padding:1rem">
            <div class="example-box">
                <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>
                <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>
                <BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>
            </div>
            <br />
            <div class="example-box">
                <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>
                <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>
                <BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>
            </div>
            <br />
            <div class="example-box">
                <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>
                <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>
                <BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>
            </div>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>
        </div>
        <br />
        <div class="example-box">
            <BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>
            <BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>
        </div>
    </DemoExample>

    <DemoExample Title="FixedColor" RazorCode="@example10RazorCode" Id="example10">
        <div>FixedColor parameter preserves the foreground color between hovering and focused states.</div><br />
        <div class="example-box">
            <BitToggleButton Color="BitColor.TertiaryBackground" FixedColor 
                             OnIconName="@BitIconName.MicOff" OffIconName="@BitIconName.Microphone" />

            <BitToggleButton Color="BitColor.TertiaryBackground" FixedColor 
                             OnText="Muted" OnIconName="@BitIconName.MicOff"
                             OffText="Unmuted" OffIconName="@BitIconName.Microphone" />
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example11RazorCode" Id="example11">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div><br />
        <div>Component's Style & Class:</div><br />
        <div class="example-box">
            <BitToggleButton Style="background-color: transparent; border-color: blueviolet; color: blueviolet;"
                             Variant="BitVariant.Outline"
                             OnText="Styled Button: Muted" OnIconName="@BitIconName.MicOff" 
                             OffText="Styled Button: Unmuted" OffIconName="@BitIconName.Microphone" />

            <BitToggleButton Class="custom-class"
                             OnText="Classed Button: Muted" OnIconName="@BitIconName.MicOff" 
                             OffText="Classed Button: Unmuted" OffIconName="@BitIconName.Microphone" />
        </div>
        <br /><br />
        <div>Styles & Classes:</div><br />
        <div class="example-box">
            <BitToggleButton OnText="Styled Button: Muted" OnIconName="@BitIconName.MicOff"
                             OffText="Styled Button: Unmuted" OffIconName="@BitIconName.Microphone"
                             Styles="@(new() { Root = "--toggle-background: pink; background: var(--toggle-background); border: none;",
                                               Checked = "--toggle-background: peachpuff;",
                                               Icon = "color: red;",
                                               Text = "color: tomato;" })" />

            <BitToggleButton Variant="BitVariant.Text"
                             OnText="Classed Button: Muted" OnIconName="@BitIconName.MicOff"
                             OffText="Classed Button: Unmuted" OffIconName="@BitIconName.Microphone"
                             Classes="@(new() { Root = "custom-root",
                                                Checked = "custom-checked",
                                                Icon = "custom-icon",
                                                Text = "custom-text" })" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example12RazorCode" Id="example12">
        <div>Use BitToggleButton in right-to-left (RTL).</div>
        <br />
        <div class="example-box" dir="rtl">
            <BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Fill"
                             OnText="صدا قطع" OnIconName="@BitIconName.MicOff" 
                             OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

            <BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Outline"
                             OnText="صدا قطع" OnIconName="@BitIconName.MicOff" 
                             OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

            <BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Text"
                             OnText="صدا قطع" OnIconName="@BitIconName.MicOff" 
                             OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />
        </div>
    </DemoExample>
</DemoPage>
